<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .top {
            width: 750px;
            height: 540px;
            /* background-color: red; */
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
        }

        .top .left {
            width: 510px;
            height: 510px;
            /* background-color: rebeccapurple; */
            border-radius: 10px;

            background-size: 100%;
            background-image: url('001.jpg');
            background-repeat: no-repeat;
        }

        .top .left img {
            width: 505px;
            height: 505px;
        }

        .top .right div {
            width: 170px;
            height: 170px;
            border-radius: 10px;
            /* background-color: lightcoral; */
            margin-top: 5px;
        }

        .buttom {
            width: 750px;
            height: 350px;
            margin: 0 auto;
            /* background-color: red; */
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .buttom div {
            width: 170px;
            height: 170px;
            /* background-color: saddlebrown; */
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="left"></div>
        <div class="right">
            <div class="yi"><img src="001.jpg" alt=""></div>
            <div class="er"><img src="002.jpg" alt=""></div>
            <div class="san"><img src="003.jpg" alt=""></div>
        </div>

    </div>
    <div class="buttom">
        <div class="si"><img src="004.jpg" alt=""></div>
        <div class="wu"><img src="005.jpg" alt=""></div>
        <div class="liu"><img src="006.jpg" alt=""></div>
        <div class="qi"><img src="007.jpg" alt=""></div>
        <div class="ba"><img src="008.jpg" alt=""></div>
        <div class="jiu"><img src="009.jpg" alt=""></div>
        <div class="shi"><img src="010.jpg" alt=""></div>
        <div class="shiyi"><img src="011.jpg" alt=""></div>
    </div>
</body>

</html>
<script>
    var left = document.querySelector('.top .left');
    var yi = document.querySelector('.top .yi');
    var er = document.querySelector('.top  .er');
    var san = document.querySelector('.top  .san');
    var si = document.querySelector('.buttom  .si');
    var wu = document.querySelector('.buttom  .wu');
    var liu = document.querySelector('.buttom  .liu');
    var qi = document.querySelector('.buttom  .qi');
    var ba = document.querySelector('.buttom  .ba');
    var jiu = document.querySelector('.buttom  .jiu');
    var shi = document.querySelector('.buttom  .shi');
    var shiyi = document.querySelector('.buttom  .shiyi');
    er.onmouseover = function () {

        left.style.backgroundImage = 'url(002.jpg)';

    }
    yi.onmouseover = function () {

        left.style.backgroundImage = 'url(001.jpg)';

    }

    er.onmouseover = function () {

        left.style.backgroundImage = 'url(002.jpg)';

    }
    
    san.onmouseover = function () {

        left.style.backgroundImage = 'url(003.jpg)';

    }
    si.onmouseover = function () {

        left.style.backgroundImage = 'url(004.jpg)';

    }
      wu.onmouseover = function () {

        left.style.backgroundImage = 'url(005.jpg)';

    }
      liu.onmouseover = function () {

        left.style.backgroundImage = 'url(006.jpg)';

    }
      qi.onmouseover = function () {

        left.style.backgroundImage = 'url(007.jpg)';

    }
      ba.onmouseover = function () {

        left.style.backgroundImage = 'url(008.jpg)';

    }
      jiu.onmouseover = function () {

        left.style.backgroundImage = 'url(009.jpg)';

    }
      shi.onmouseover = function () {

        left.style.backgroundImage = 'url(010.jpg)';

    }
      shiyi.onmouseover = function () {

        left.style.backgroundImage = 'url(011.jpg)';

    }
</script>